<template>
  <div style="border: 1px solid #E8E8E8;border-radius: 5px;padding: 15px">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <div style="margin-bottom: 10px;">
      <van-cell style="border:1px solid #eee;border-radius:10px;" is-link :title="dateValue || '巡检时间'" @click="showDate = true" />
      <van-action-sheet
        v-model="showDate"
        @select="onChangeCircuitDate"
        :actions="circuitDateList"
        cancel-text="取消"
        description="巡检时间"
        close-on-click-action/>
    </div>

    <div class="table-operator">
      <a-button @click="addCircuit" v-has="'customer:addCircuit'" type="primary" icon="plus">新增</a-button>
      <!-- <a-dropdown v-if="selectedRowKeys.length > 0" v-has="'customer:batchDelCircuit'">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="downLoadData"
        :immediate-check="false">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            :title="item.situation"
            :name="i"
            v-for="(item,i) in dataSource"
            :key="i">
            <div class="list">
              <div>巡检情况：{{ item.situation }}</div>
              <div>业主反馈：{{ item.feedback }}</div>
              <div>巡检时间：{{item.circuitTime}}</div>
              <div>巡检人：{{item.createBy}}</div>
              <div>创建时间：{{item.createTime}}</div>
              <div>操作：
                <span>
                  <a @click="handleEdit(item)" v-has="'customer:editCircuit'">编辑</a>
                  <a-divider type="vertical" v-has="'customer:editCircuit'" />
                    <a @click="circuitDetailModel(item)">详情</a>
                  <a-divider type="vertical" v-has="'customer:delCircuit'" />
                  <a-popconfirm title="确定删除吗?" v-has="'customer:delCircuit'" @confirm="() => deleteItem(item.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-list>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div> -->
      <!-- <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-has="'customer:editCircuit'">编辑</a>
          <a-divider type="vertical" v-has="'customer:editCircuit'" />
            <a @click="circuitDetailModel(record)">详情</a>
          <a-divider type="vertical" v-has="'customer:delCircuit'" />
          <a-popconfirm title="确定删除吗?" v-has="'customer:delCircuit'" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table> -->
    </div>
    <gh-site-circuit-modal ref="modalForm" @ok="loadData(1)"></gh-site-circuit-modal>
    <circuitDetailModel ref="circuitDetailModel"></circuitDetailModel>
  </div>
</template>
<script>
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import GhSiteCircuitModal from './modules/GhSiteCircuitModal'
import circuitDetailModel from './modules/circuitDetailModel'
import { getAction, deleteAction } from "@/api/manage";

export default {
  name: 'GhSiteCircuitList',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
    GhSiteCircuitModal, circuitDetailModel
  },
  props: {
    customerId: {
      required: true,
      default: 0
    },
  },
  data () {
    return {
      finished: false,
      activeName: '',
      showDate: false,
      description: 'gh_site_circuit管理页面',
      queryParam: {
        customerId: this.customerId
      },
      dataSource: [],
      circuitDateList: [],

      startDate: '',
      endDate: '',
      dateValue: '',
      currentCircuitDate: '',
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'巡检情况',
          align:"center",
          dataIndex: 'situation',
          customCell:() => {
            return {
              style: {
                wordWrap:'break-word',
                wordBreak:'break-all',
                whiteSpace:'normal',
                minHeight:'50px',
                width: '700px',
              }
            }
          }
        },
        {
          title:'业主反馈',
          align:"center",
          dataIndex: 'feedback',
          customCell:() => {
            return {
              style: {
                wordWrap:'break-word',
                wordBreak:'break-all',
                whiteSpace:'normal',
                minHeight:'50px',
                width: '700px',
              }
            }
          }
        },
        {
          title:'巡检时间',
          align:"center",
          dataIndex: 'circuitTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title:'巡检人',
          align:"center",
          dataIndex: 'createBy'
        },
        {
          title:'创建时间',
          align:"center",
          dataIndex: 'createTime',
          customRender:function (text) {
            return !text?"":(text.length>10?text.substr(0,10):text)
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          fixed:"right",
          width:147,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: "/ghSiteCircuit/list",
        delete: "/ghSiteCircuit/delete",
        deleteBatch: "/ghSiteCircuit/deleteBatch",
        exportXlsUrl: "/ghSiteCircuit/exportXls",
        importExcelUrl: "ghSiteCircuit/importExcel",
        getSearchConditionData: "/ghSiteCircuit/getQueryCriteriaData",
      },
      dictOptions:{},
      superFieldList:[],
    }
  },
  created() {
    this.initSearchConditionData();
  },
  methods: {
    downLoadData(){
      this.ipagination.current++;
      this.finished = false
      this.loadData()
    },
    deleteItem(id){
      if(!this.url.delete){
        this.$message.error("请设置url.delete属性!")
        return
      }
      let that = this;
      that.loading = true;
      deleteAction(that.url.delete, {id: id}).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loadData(1);
        } else {
          that.$message.warning(res.message);
        }
      }).finally(() => {
        this.loading = false
      });
    },
    initSearchConditionData() {
      getAction(this.url.getSearchConditionData).then(res => {
        if (res.success) {
          this.circuitDateList = res.result.circuitDateList.slice(0,res.result.circuitDateList.length-1);
          for(let i = 0; i < this.circuitDateList.length; i++){
            this.circuitDateList[i].name = this.circuitDateList[i].itemText
          }
        }
      })
    },
    onChangeCircuitDate(e){
      if(!e) return
      this.dateValue = e.itemText;
      this.currentCircuitDate = e.itemValue;
      this.loadData(1);
    },
    //自定义单据时间
    onChangeCustomerCircuitDate(value, dateString){
      this.startDate = dateString[0];
      this.endDate = dateString[1];
      this.currentCircuitDate = "customizeTime";
      this.loadData(1);
    },
    addCircuit() {
      this.$refs.modalForm.add(this.customerId);
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },
    circuitDetailModel(record){
      this.$refs.circuitDetailModel.showDrawer(record);
      this.$refs.circuitDetailModel.visible = true;
      this.$refs.circuitDetailModel.title = "巡检详情";
    },
    loadData(arg) {
      if (arg == 1) {
        this.ipagination.current = 1;
        this.finished = false
        this.dataSource = []
      }

      let params = this.getQueryParams();//查询条件
      if (this.currentCircuitDate != null && this.currentCircuitDate != '') {
        params.currentTime = this.currentCircuitDate;
        if (this.currentCircuitDate == "customizeTime"){
          params.beginTime = this.startDate;
          params.endTime = this.endDate;
        }
      }else {
        params.currentTime = "";
      }
      this.loading = true;
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          let list = res.result.records||res.result;
          this.dataSource = [...this.dataSource, ...list]
          this.ipagination.total = res.result.total;

          this.loading = false
          if(list.length<10){
            this.finished = true;
          }
        }else{
          this.$message.warning(res.message)
          this.finished = true;
        }

      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
.list{
  line-height: 30px;
  border-top: 1px solid #f6f6f6;
  font-size: 12px;
}
</style>